<template>
  
  <div>
    
    <el-form label-width="90px" :model="formState" :rules="rules" ref="formRef">
      <el-form-item label="红娘姓名" prop="realname">
        <el-input v-model="formState.realname" />
      </el-form-item>
      <el-form-item label="红娘账号" prop="username">
        <el-input v-model="formState.username" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="formState.password" />
      </el-form-item>
      <el-form-item label="红娘微信" prop="wechat">
        <el-input v-model="formState.wechat" />
      </el-form-item>
      <el-form-item label="红娘手机号" prop="phone">
        <el-input v-model="formState.phone" />
      </el-form-item>
      <el-form-item label="生日" prop="cdate">
        <el-date-picker
          v-model="formState.cdate"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择日期"
          clearable
        />
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="formState.sex">
          <el-radio label="1">先生</el-radio>
          <el-radio label="2">女士</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm"> 保存 </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { dayjs } from "element-plus";
import type {IAddUserFormType} from '../../../typings/ladyType'
import { useAddValidate } from '../useValidate'
import type {FormInstance, CascaderOption} from "element-plus";
import {addUserApi} from '@/api/ladyApi'

// 作为孙子接收数据是为了点击提交表单按钮的时候关闭弹框，因为弹框的实际控制在index.vue里面（爷爷），这些数据接收的是父亲里面的，父亲的数据是从爷爷index.vue里面得到的
interface IProps {
  setVisible: (v: boolean) => void
}
const emit = defineEmits();
const props = defineProps<IProps>()
// 表单指明类型
const formRef = ref<FormInstance>()
// 定义校验规则 
const rules = useAddValidate()
// 定义表单数据
const formState = reactive<IAddUserFormType>({
  username: "",
  sex: "1",
  age: 23,
  region: ["北京", "昌平"],
  avatar: "http:xxx.com",
  realname: "",
  cdate: dayjs().add(-20, "y").format("YYYY-MM-DD"),
  phone:'',
  wechat:'',
  password:''
});

// 提交表单信息
const submitForm = () => {
    
  if (!formRef.value) return
  formRef.value.validate(async (valid: boolean) => {
    // 表单项验证通过
    if (valid) {
      // 1.请求
      // 2.响应，成功|失败
      // 3.关闭当前弹出层
      // 4.请求1次
      let ret = await addUserApi(formState)
    //   如果输入信息是正确的，那么就将这个弹框关闭
      if (ret.code === 0) {
        // loadData(formState)
        props.setVisible(false);
        formState.username = "";
        formState.sex = "1";
        formState.age = 23;
        formState.realname = "";
        formState.cdate = dayjs().add(-20, "y").format("YYYY-MM-DD");
        formState.phone = "";
        formState.wechat = "";
        formState.password = "";
        
      }
    } else {
      return false
    }
  })
}
</script>

<style scoped lang="scss"></style>
